import React, { Component } from "react"
import  { Link } from 'react-router'
import fetchData from '../../util/fetch'
import { Pagination, Row, Col, Collapse } from 'antd'
const Panel = Collapse.Panel;
import { Map, Marker } from 'react-amap'
import moment from 'moment'
import telImg from '../../img/profile6.png'
import addressImg from '../../img/profile5.png'
import emailImg from '../../img/profile7.png';
import { getUrl } from '../../util/function'
class Profile extends Component {
	constructor(props) {
		super(props)
		this.state = {
			title: "服务",
			homelist: [],
			cityInfo: {},
			brand: {},
			news: {},
			newsList: {
				total: 50,
				page: 1,
				size: 10,
				data: [
					{ title: '1', createTime: '1', id: '99' },
					{ title: '2', createTime: '1', id: '99' },
					{ title: '3', createTime: '1', id: '99' },
					{ title: '4', createTime: '1', id: '99' },
					{ title: '5', createTime: '1', id: '99' },
					{ title: '6', createTime: '1', id: '99' },
					{ title: '7', createTime: '1', id: '99' },
					{ title: '8', createTime: '1', id: '99' },
					{ title: '9', createTime: '1', id: '99' },
					{ title: '10', createTime: '1', id: '99' }
				
				]
			},
			contactUs: {},
			welcome: {},
			welcomeList: [],
			listId: ''
		}
		this.mapPlugins = ['ToolBar'];
		this.mapCenter = { longitude: 116.407092, latitude: 39.974401 };
		this.markerPosition = { longitude: 116.407092, latitude: 39.974401 };
		//116.407092,39.974401
	}
	
	getData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data)
			switch (opts.str) {
				case '7-1':
					this.setState({
						cityInfo: data
					});
					break;
				case '7-2':
					this.setState({
						brand: data
					});
					//console.log(data, '品牌文化')
					break;
				case '7-3':
					this.setState({
						news: data
					});
					//console.log(data, '新闻动态')
					break;
				case '4-1-1':
					this.setState({
						newsList: res
					});
					//console.log(res, '新闻动态列表')
					break;
				case '7-4':
					this.setState({
						contactUs: data
					});
					//console.log(data, '联系我们')
					break;
				case '7-5':
					this.setState({
						welcome: data
					});
					//console.log(data, 'hibaby团队期待你的加入')
					break;
				case '7-5-1':
					this.setState({
						welcomeList: data
					});
					//console.log(data, 'hibaby团队期待你的加入列表')
					break;
				
			}
		}.bind(this))
	}
	
	getBannerData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			this.setState({
				banner: data
			});
		}.bind(this));
	}
	
	componentWillMount() {
		//console.log("xxxx",this.props.params.listId)
		// this.setState({
		// 	listId:this.props.params.listId,
		// })
		
		//banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
		this.getBannerData('/crm/api/v1/web/banner/findOneByType', { "dataId": 6 });
		//7-1 企业介绍
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "7-1" });
		//7-2 品牌文化
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "7-2" });
		//7-3 新闻动态
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "7-3" });
		//7-3—1 新闻动态列表
		this.getData('/crm/api/v1/web/news/findPageListByType', {
			"page": '1',
			"size": '10',
			"type": "4-1-1",
			"str": "4-1-1"
		});
		//7-4 联系我们
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "7-4" });
		//7-5 hibaby团队期待你的加入
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "7-5" });
		
		//7-5-1 hibaby团队期待你的加入列表
		this.getData('/crm/api/v1/web/webJob/list', { "str": "7-5-1", size: '100' });
	}
	
	onChange = (page) => {
		this.getData('/crm/api/v1/web/news/findPageListByType', {
			"page": page,
			"size": '10',
			"type": "7-3-1",
			"str": "7-3-1"
		});
	}

    shouldComponentUpdate(nextProps, nextState) {

		if (this.props.params.listId != nextProps.params.listId) {
            const anchor = '.' + nextProps.params.listId;
            // setTimeout(function () {
            $("body").animate({ scrollTop: $(anchor).offset().top }, 500)
            // }, 400);
		}
		return true;
	}
	
	componentDidMount() {
        if (this.props.params.listId) {
            const anchor = '.' + this.props.params.listId;
            setTimeout(function () {
                $("html,body").animate({ scrollTop: $(anchor).offset().top }, 500)
            }, 300)
        }
	}
	
	render() {
		const { cityInfo, brand, news, newsList, contactUs, welcome, welcomeList } = this.state;
		const { total, data } = newsList;
		
		//console.log(cityInfo)
		return (
			<div className="profile">
				<div className="profile-banner"><img src={this.state.banner ? this.state.banner.imgUrl : null}/></div>
				<div className="profile-content">
					<div className="profileBox">
						<Row>
							<Col span="10" className="profile-left">
								<img src={cityInfo.img1Url}/>
							</Col>
							<Col span="14" className="profile-right">
								<h2>{cityInfo.title}<span></span></h2>
								<p>
									{cityInfo.content}
								</p>
							</Col>
						</Row>
					</div>
				</div>
				<div className="cultureBox">
					<div className="culture">
						<h2>{brand.title}<span></span></h2>
						<img className="cultureImg1" src={brand.img1Url}/>
					</div>
				</div>
				<div className="News">
					<div className="news-top">
						<img src={news.img1Url}/>
					</div>
					<h2> {news.title}<span></span></h2>
					<ul className="NewsList">
						{
							data.map((v, k) => {
								const time = moment(v.createTime)
								return (
									<Link className="newsLink" key={k} to={`/detail?id=${v.id}`}>
										<li>
											<p className="NewsTitle"><span className="point"></span>{v.title}</p>
											<p className="NewsDate">{time.format('YYYY-MM-DD')}</p>
										</li>
									</Link>
								)
							})
						}
						<Pagination size="small" onChange={this.onChange} total={total}/>
					</ul>
				</div>
				<div className="contactBox">
					<div className="contact">
						<Row className="contact-topTab">
							<h2>{contactUs.title}<span></span></h2>
						</Row>
						<Row className="contactUs-img">
							<img src={contactUs.img1Url}/>
						</Row>
						<Row className="profile-address">
							<Col span="14" className="profileAddressLeft">
								<Map amapkey={'788e08def03f95c670944fe2c78fa76f'}
								     plugins={this.mapPlugins}
								     center={this.mapCenter}
								     zoom={16}>
									<Marker position={this.markerPosition}/>
								</Map>
							</Col>
							<Col span="10" className="profileAddressRight">
								<h3>凯贝姆健康管理有限公司</h3>
								<div className="contact-address">
									<span><img src={addressImg}/></span>
									<p>北京市朝阳区安定路35号安华发展大厦10层01-08内1009房间</p>
									<span><img src={telImg}/></span>
									<p>010-80699785</p>
									<span><img src={emailImg}/></span>
									<p>hibaby@hbbcare.com</p>
								</div>
							</Col>
						</Row>
					</div>
				</div>
				<div className="Hibaby-team">
					<Row className="team-topTab">
						<h3>{welcome.title}</h3>
					</Row>
					<Row className='hibaby-team-bg'>
						<Col className='tabTitleCol' span={5}>招聘职位</Col>
						<Col className='tabTitleCol' span={4}>招聘人数</Col>
						<Col className='tabTitleCol' span={5}>工作地点</Col>
						<Col className='tabTitleCol' span={5}>发布时间</Col>
						<Col className='tabTitleCol' span={5}>操作</Col>
					</Row>
					<Row className="hibaby-team-content">
						<Collapse bordered={false}>
							{
								welcomeList.map((v, k) => {
									const time = moment(v.createTime);
									
									return (
										<Panel
											key={k}
											header={
												<Row className='hibaby-team-title'>
													<Col span={5} className="PaddingClass">{v.name}</Col>
													<Col span={4}>{v.number}</Col>
													<Col span={5}>{v.address}</Col>
													<Col span={5}>{time.format('YYYY-MM-DD')}</Col>
													<Col span={5}>查看详情</Col>
												</Row>
											}>
											<Row>
												<div className="hibaby-team-info" style={{
													fontSize: '14px',
													lineHeight: '24px',
													fontFamily: 'Microsoft YaHei'
												}} dangerouslySetInnerHTML={{ __html: v.content ? v.content : null }}>
												</div>
											</Row>
										</Panel>
									)
								})
								
							}
						</Collapse>
					</Row>
				</div>
			</div>
		)
	}
}
export default Profile;
